<template>
  <a-tabs style="background-color: white" v-model:active-key="currentPage" size="mini">
    <a-tab-pane v-for="item of tabList" :key="item.index" :title="setTitle(item)" />
  </a-tabs>

  <OrderTableBody :getCountOrderStatus="getCountOrderStatus" :status="currentPage" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { countOrderStatus } from '@/api/order'
  import OrderTableBody from './components/tableBody.vue'
  import { number } from 'echarts/core'
  interface itemType {
    label: string
    num?: string | number
    index: string
  }
  export default defineComponent({
    components: {
      OrderTableBody,
    },
    setup() {
      const data: any = reactive({
        currentPage: 'NULL',
        tabList: [
          { label: '全部', index: 'NULL' },
          { label: 'pending', num: '', index: 'PENDING' },
          { label: '待发货', num: '', index: 'UNSHIPPED' },
          { label: '已发货', num: '', index: 'SHIPPED' },
          { label: '已取消', num: '', index: 'CANCELED' },
        ],
      })

      const setTitle = (item: itemType) => {
        if (item.num || item.num == 0) {
          return `${item.label}(${item.num})`
        } else {
          return `${item.label}`
        }
      }

      const getCountOrderStatus = async (params?: any) => {
        const res: any = await countOrderStatus(params)
        data.tabList[1].num = res?.data?.pendingCount
        data.tabList[2].num = res?.data?.unshippedCount
        data.tabList[3].num = res?.data?.shippedCount
        data.tabList[4].num = res?.data?.canceledCount
      }

      getCountOrderStatus()

      return {
        ...(toRefs(data) as any),
        setTitle,
        getCountOrderStatus,
      }
    },
  })
</script>

<style lang="less" scoped></style>
